<template>
  <div class="contact">
    <van-field
      v-model="productId"
      name="商品序号"
      label="商品序号"
      placeholder="如 11***， 12***"
      :rules="[{ required: true, message: '请填写商品序号' }]"
    />
    <van-field
      v-model="productName"
      name="商品名称"
      label="商品名称"
      placeholder="如 提来米苏"
      :rules="[{ required: true, message: '请填写商品名称' }]"
    />
    <van-field
      v-model="classifyName"
      name="商品类别名称"
      label="商品类别名称"
      placeholder="如 提来米苏"
      :rules="[{ required: true, message: '请填写商品类别名称' }]"
    />
    <van-field
      v-model="classify"
      name="商品类别"
      label="商品类别"
      placeholder="如 X"
      :rules="[{ required: true, message: '请填写商品类别' }]"
    />
    <van-field
      v-model="bazaarPrice"
      name="商品原始价格"
      label="商品原始价格"
      placeholder="商品原始价格"
      :rules="[{ required: true, message: '请填写商品原始价格' }]"
    />
    <van-field
      v-model="salePrice"
      name="商品打折价格"
      label="商品打折价格"
      placeholder="商品打折价格"
      :rules="[{ required: true, message: '请填写商品打折价格' }]"
    />
    <van-field
      v-model="productNum"
      name="商品数量"
      label="商品数量"
      placeholder="商品数量"
      :rules="[{ required: true, message: '请填写商品数量' }]"
    />
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader v-model="uploader" />
      </template>
    </van-field>
    <van-button size="large" color="pink" class="btn" @click="submit">提交</van-button>
    <van-button size="large" color="pink" class="btn1" @click="management">管理商品</van-button>
    <van-button size="large" color="pink" class="btn2" @click="service">客服中心</van-button>
  </div>
</template>

<script>
import { Toast } from 'vant'
import axios from 'axios'
export default {
  data () {
    return {
      productId: '',
      productName: '',
      classifyName: '',
      classify: '',
      bazaarPrice: '',
      salePrice: '',
      productNum: '',
      uploader: [],
      userName: '',
      userId: ''
    }
  },
  mounted () {
    this.getCookie()
  },
  methods: {
    management () {
      this.$router.push({
        path: '/management'
      })
    },
    service () {
      this.$router.push({
        path: '/service'
      })
    },
    submit () {
      console.log(this.productId)
      if (this.userName === 'suiboyu' && this.userId === '1809104005') {
        axios.post('/goods/addGoods', {
          productId: this.productId,
          productName: this.productName,
          classifyName: this.classifyName,
          classify: this.classify,
          bazaarPrice: this.bazaarPrice,
          salePrice: this.salePrice,
          productNum: this.productNum,
          productImage: this.uploader[0].content
        }).then((response) => {
          let res = response.data
          console.log(res)
          if (res.status === 0) {
            Toast('添加成功')
          } else {
            Toast('不是管理员，无法提交商品')
          }
        })
      }
    },
    getCookie () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ')
        console.log(arr)
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=')
          if (arr2[0] === 'userName') {
            this.userName = arr2[1]
            console.log(this.userName)
          } else if (arr2[0] === 'userId') {
            this.userId = arr2[1]
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contact {
  // background-color: pink;
  height: 612px;
  width: 50%;
  margin: 10px auto;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  .btn {
    bottom: -1px;
  }
  .btn1 {
    bottom: -23px;
  }
  .btn2 {
    bottom: -47px;
  }
}
</style>
